<template>
	<view class="detail-book">
		<navBar title="證書詳情" @goBack="uni.navigateBack()"></navBar>
		<view class="item"></view>
		<view class="cer_detail_box">
			<view class="container" v-for="(item, key) in certificateViewingList" :key="key">
				<view class="left">
					<u--image  :src="item.file.url" width="95px" height="66px" @click="previewImage(item.file.url)"></u--image>
				</view>
				<view class="right">
					<view class="title">
						<view class="txt">{{ item.certificateCategoryName }}</view>
						<view class="tips" :class="item.effectiveDateClass" v-if="item.effectiveDateClass === 'yellow-bg'">即将过期</view>
						<view class="tips" :class="item.effectiveDateClass" v-if="item.effectiveDateClass === 'red'">已过期</view>
					</view>
					<view class="label" style="margin-top: 10rpx;">
						有效日期：
						<text :class="item.effectiveDateClass">{{ item.effectiveDate }}</text>
					</view>
					<view class="label">證書編號：{{ item.certificateNumber || '' }}</view>
				</view>
			</view>
		</view>
		<u-empty v-if="!certificateViewingList.length" mode="data" text="数据为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>

</template>

<script>
	import { personCertificate_list } from "@/api/HongKong/hkAttendanceSheet.js";
	import { handleFormatDate, compareDate } from "@/utils/date.js";
	import { getPicture } from '@/api/doc.js'
	import mixins from "@/utils/mixins.js"
	export default {
		mixins:[mixins],
		data() {
			return {
				certificateViewingList:[]
			}
		},
		onLoad(option) {
			if(option && option.id) {
				this.getpersonCertificatelist(option.id)
			}
			
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片']
					}
				});
			},
			getpersonCertificatelist(id) {
			  personCertificate_list({ id ,projectId:uni.getStorageSync('isOwner')}).then(async res => {
				if (res && Array.isArray(res.result)) {
				  const tempArray = []
				  for (const item of res.result) {
					let effectiveDateClass = ''
					if (item.effectiveDate) {
						// console.error(this.getDate2(item.currentDate))
						const time = new Date(`${handleFormatDate(item.effectiveDate)} 23:59:59`).getTime()
						// console.log('1111', time,this.getDate2(time))
					  if (time <= item.currentDate) {
						effectiveDateClass = 'red'
					  } else if(time <= item.currentDate + 24 * 60 * 60 * 1000 * 30){
						effectiveDateClass = 'yellow-bg'
					  }else if (time <= item.currentDate + 24 * 60 * 60 * 1000 * 60) {
						effectiveDateClass = 'yellow'
					  }
					}
					const files = await this.getItemImage(item.fileDocId)
					tempArray.push({
					  ...item,
					  effectiveDate: item.effectiveDate ? handleFormatDate(new Date(item.effectiveDate)) : '',
					  effectiveDateClass,
					  file: files.length ? files[0] : {}
					})
				  }
				  this.certificateViewingList = tempArray
				  console.debug(this.certificateViewingList, '---')
				}
			  })
			},
			/**
			 * 获取到docId中的图片并且拼成网络路径格式
			 * @param {Number} docId
			 * @return {String} //拼好的网络路径格式
			 */
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({ docId }).then(res => {
						let imgResult = res.result.filter(item => item.contentType.substring(0, item
							.contentType.indexOf("/")) === 'image')
						resolve(imgResult.map(it => ({
							url: this.$config.IMG_FILE_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-book {
		/* #ifdef MP-WEIXIN */
		margin-top: 200rpx;
		/* #endif */
	}
	.item {
		height: 30rpx;
		background: #F5F7FA;
	}
	.cer_detail_box {
		padding: 0 30rpx;
		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px dashed #E0E7F6;
			padding: 40rpx 0 30rpx 0;
			.left{
				width: 100px;
			}
			.right {
				flex: 1;
				margin-left: 20rpx;
				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.txt {
						font-weight: bold;
						font-size: 30rpx;
						color: #2F476C;
					}
					.tips {
						min-width: 140rpx;
						height: 46rpx;
						background: #FAA500;
						border-radius: 46rpx;
						color: #fff;
						line-height: 46rpx;
						text-align: center;
						padding: 6rpx 10rpx;
					}
					.tips.red {
						background: #fb5842;
					}
					.tips.yellow-bg {
						background: #FAA500;
					}
				}
				.label {
					font-weight: 500;
					font-size: 26rpx;
					color: #7C8CA0;
					.red {
						color:#fb5842 ;
					}
					.yellow, .yellow-bg {
						color: #FAA500;;
					}
				}
			}
		}
	}

</style>